<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="/sunzbase.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--_meta 作为公共模版分离出去-->
<html>
<head>
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--/meta 作为公共模版分离出去-->
<z:resource items="easyui"></z:resource>
<title>添加日志</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" id="form-article-add">
	<input type="hidden" value="${noteOne.id}" id="id" name="id">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>笔记标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="${noteOne.title}" placeholder="" id="title" name="title">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类栏目：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<input id="classID" name="classID" value="${noteOne.tagId}" style="width:100%" />
				</span> </div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">关键词：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="${noteOne.keywords}" placeholder="" id="keywords" name="keywords">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">文章摘要：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="articleAbstract" id="articleAbstract" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" datatype="*10-200" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="$('.textarea').Huitextarealength(this,200)">${noteOne.articleAbstract}</textarea>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">文章内容：</label>
			<div class="formControls col-xs-8 col-sm-9"> 
				<script id="editor" name="editor" type="text/plain" style="width:100%;height:400px;"></script> 
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">权&nbsp;&nbsp;&nbsp;&nbsp;限：</label>
			<div class="formControls col-xs-8 col-sm-9"> 
				<select id="noteState" name="noteState">
					<option value="0" <c:if test="${noteOne.noteState==0}">selected="selected" </c:if>>公开</option>
					<option value="1" <c:if test="${noteOne.noteState==1}">selected="selected" </c:if>>仅自己可见</option>
				</select>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
				<!-- <button onClick="article_save();" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存草稿</button>
				<button onClick="showlocs();" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 恢复草稿</button>
				<button onClick="stoplocs();" class="btn btn-default radius" type="button">&nbsp;&nbsp;删除本地草稿&nbsp;&nbsp;</button> -->
			</div>
		</div>
	</form>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="resources/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="resources/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="resources/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="resources/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="resources/lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="resources/lib/ueditor/1.4.3/ueditor.config.js"></script> 
<script type="text/javascript" src="resources/lib/ueditor/1.4.3/ueditor.all.min.js"> </script> 
<script type="text/javascript" src="resources/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
$(function(){
	var id=$("#classID").val();
	$.ajax({
		url:"note/allClass2",
		data:{classID:id},
		dataType:"json",
		success:function(result){
			if(result.success){
				var data=result.data.classList;
				data=parseTreeJson(data);
				$("#classID").combotree({
				   data:data
				}); 
				if(id!=null&&result.data.classList){
					$("#classID").combotree("setValue","${noteOne.tagId}");
				}/* else{
					$("#classID").combotree("setValue",0);
				} */
			}
		},
		error:function(){}
	});
	
	function parseTreeJson(data){
		for(var i=0;i<data.length;i++){
			var item=data[i];
			item.text=data[i].tagName;
			item.children=item.childs;
			parseTreeJson(item.children);
		}
		return data;
	}
	
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	//表单验证
	$("#form-article-add").validate({
		rules:{
			title:{
				required:true,
				maxlength:100
			},
			allClass:{
				required:true,
			},
			keywords:{
				maxlength:50
			},
			articleAbstract:{
				minlength:0,
				maxlength:100
			}
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			var id = $("#id").val();
			var URL = '';
			if(id != null && id != ""){
				URL = "${webRoot}/note/updateNoteByid";
			}else{
				URL = "${webRoot}/note/addNoteByUser";
			}
			$(form).ajaxSubmit({
				url:URL,
				data:$("#form-article-add").serialize(),
				type:"post",
				dataType:"json",
				success:function(obj){
					if(obj.success){
						layer.msg(obj.msg);
						setTimeout(function(){
							window.parent.location.reload();
						}, 2000);
					}
				}
			});
		}
	});
	
	$list = $("#fileList"),
	$btn = $("#btn-star"),
	state = "pending",
	uploader;

	var uploader = WebUploader.create({
		auto: true,
		swf: 'resource/lib/webuploader/0.1.5/Uploader.swf',
	
		// 文件接收服务端。
		server: 'fileupload.php',
	
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: '#filePicker',
	
		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		resize: false,
		// 只允许选择图片文件。
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		}
	});
	uploader.on( 'fileQueued', function( file ) {
		var $li = $(
			'<div id="' + file.id + '" class="item">' +
				'<div class="pic-box"><img></div>'+
				'<div class="info">' + file.name + '</div>' +
				'<p class="state">等待上传...</p>'+
			'</div>'
		),
		$img = $li.find('img');
		$list.append( $li );
	
		// 创建缩略图
		// 如果为非图片文件，可以不用调用此方法。
		// thumbnailWidth x thumbnailHeight 为 100 x 100
		uploader.makeThumb( file, function( error, src ) {
			if ( error ) {
				$img.replaceWith('<span>不能预览</span>');
				return;
			}
	
			$img.attr( 'src', src );
		}, thumbnailWidth, thumbnailHeight );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
		var $li = $( '#'+file.id ),
			$percent = $li.find('.progress-box .sr-only');
	
		// 避免重复创建
		if ( !$percent.length ) {
			$percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
		}
		$li.find(".state").text("上传中");
		$percent.css( 'width', percentage * 100 + '%' );
	});
	
	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file ) {
		$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
	});
	
	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
		$( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
	});
	
	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
		$( '#'+file.id ).find('.progress-box').fadeOut();
	});
	uploader.on('all', function (type) {
        if (type === 'startUpload') {
            state = 'uploading';
        } else if (type === 'stopUpload') {
            state = 'paused';
        } else if (type === 'uploadFinished') {
            state = 'done';
        }

        if (state === 'uploading') {
            $btn.text('暂停上传');
        } else {
            $btn.text('开始上传');
        }
    });

    $btn.on('click', function () {
        if (state === 'uploading') {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });
	
	var ue = UE.getEditor('editor');
	//监听ue
	ue.addListener("ready", function () {
        //ue准备好之后才可以使用
		ue.setContent('${noteOne.content}');
	});
});

</script>
<script type="text/javascript">
/*注意: 本js脚本请在网页源代码最后的地方放置*/
 /* 20180810暂停使用，启用请把点击按钮事件注释解掉即可*/
	var ue = UE.getEditor('editor');
	var saveTimer;
	function article_save() {
		$("#edui1_message_holder").html('数据正在保存到草稿箱...');
		saveTimer = setInterval(function() {
			var str = "";
			if (document.all) {/* IE */
				str = document.frames[1].document.body.innerHTML;
			} else {/* Chrome,ff */
				str = ue.getContent();
			};
			if (str.length > 20) { // 有内容才保存
				localStorage.setItem("autoSaveContent", str);
				localStorage.setItem("title", $("#title").val());
				localStorage.setItem("keywords", $("#keywords").val());
				localStorage.setItem("articleAbstract", $("#articleAbstract").val());
				var d = new Date();
				var YMDHMS = d.getFullYear() + "-" + (d.getMonth() + 1)
							+ "-" + d.getDate() + " " + d.getHours() + ":"
							+ d.getMinutes() + ":" + d.getSeconds();
				$("#edui1_message_holder").html('（数据保存于: ' + YMDHMS + '）');
				setTimeout(function() {
					$("#edui1_message_holder").html('');
					//<div id="edui1_message_holder" class="edui-editor-messageholder edui-default" style="top: 82px; z-index: 1000;"></div>
				}, 5000);
			}
		}, 25000); // 每隔N秒保存一次
	}
	function stoplocs() {
		layer.confirm('确认删除草稿？',function(index){
			var html = localStorage.getItem("autoSaveContent");
			if(html == null){
				layer.alert("草稿为空");
				return;
			}
			clearInterval(saveTimer); // 停止保存
			localStorage.removeItem("autoSaveContent"); //清空
			localStorage.removeItem("title"); //清空
			localStorage.removeItem("keywords"); //清空
			localStorage.removeItem("articleAbstract"); //清空
		})
	}

	function showlocs() {
		layer.confirm('确认恢复草稿？',function(index){
			var html = localStorage.getItem("autoSaveContent");
			if(html == null){
				layer.alert("草稿为空");
				return;
			}
			$("#title").val(localStorage.getItem("title"));
			$("#keywords").val(localStorage.getItem("keywords"));
			$("#articleAbstract").val(localStorage.getItem("articleAbstract"));
			ue.setContent(html);
		})
	}
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>